<template>
    <div class="g-sd4">
        <div class="g-wrap7">
            <h3 class="u-hd3" v-if="simiPlaylistData.length">
              <span class="f-fl">包含这首歌的歌单</span>
            </h3>
            <ul class="m-rctlist f-cb">
                <li v-for="(item , index) in  simiPlaylistData" :key="index">
                  <div class="cver u-cover u-cover-3">
                       <a href="javascript:;"><img :src="item.coverImgUrl" :alt="item.name"></a>
                  </div>
                  <div class="info">
                      <p class="f-thide"><a href="javascript:;" class="sname f-fs1 s-fc0"  @click.stop="toexhibition(item.id)" >{{item.name}}</a></p>
                      <p>
                        <span class="by s-fc4">by</span>
                        <a class="nm nm f-thide s-fc3" href="javascript:;" title="情感文字君">{{item.creator.nickname}} </a>
                      </p>
                  </div>
                 </li>
            </ul>
           <h3 class="u-hd3"  v-if="simiSongData.length">
              <span class="f-fl">相似歌曲</span>
            </h3>
            <ul class="m-sglist f-cb">
                <li class="f-cb" v-for="(item , index) in simiSongData " :key="index" >
                    <div class="txt">
                        <div class="f-thide">
                            <a href="javascript:;" :title = 'item.name' @click.stop="toFatherId(item.id)">{{item.name}}</a>
                        </div>
                        <div class="f-thide s-fc4">
                            <span title = '22秒'>
                                <a href="javascript:;" class="s-fc4" v-for="(a , index ) in item.artists" :key="index">{{a.name}} <slot v-if="index !== item.artists.length -1">/</slot></a>
                            </span>
                        </div>
                    </div>
                    <div class="opr f-cb">
                       <a href="javascript:;" class="play"></a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { simi_song} from '../../../network/song'
import {simi_playlist} from '../../../network/song'
export default {
    props:['id'],
    data() {
        return {
            ids:'', //歌曲id
            simiSongData:[], //相似歌曲信息
            simiPlaylistData:[]  //包含这首歌的歌单
        }
    },
    methods:{
       simiSong(){         //获取相似歌曲信息
           simi_song(this.ids.id).then(res => {
               this.simiSongData =  res.data.songs
           }) 
       },
       simiPlaylist(){   //获取包含这首歌的歌单
          simi_playlist(this.ids.id).then(res => {
              this.simiPlaylistData = res.data.playlists
          })
        },
        toFatherId(musicid){
           this.$router.push(
              {path :"/home/song" , query:{id:musicid}}
           )
        },
        toexhibition(songid){
             this.$router.push({path:"/home/playlist" , query:{id:songid}});
        }
    },
    watch:{
       id(id){
          this.ids = this.id
          this.simiSong()
          this.simiPlaylist()
        }
    },
    created(){
        this.ids = this.id
        this.simiSong()
        this.simiPlaylist()
    }
}
</script>

<style scoped>
.g-sd4 {
    position: relative;
    float: right;
    width: 270px;
    font-size: 12px;
}
.g-wrap7 {
    padding: 20px 40px 40px 30px;
}
.u-hd3 {
    position: relative;
    height: 23px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    color: #333;
}
.m-sglist {
    margin-bottom: 25px;
}
.m-sglist li {
    margin-top: 10px;
}
.m-sglist .txt {
    float: left;
    width: 156px;
    line-height: 16px;
}
.f-thide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
.s-fc4, a.s-fc4:hover {
    color: #999;
}
.m-sglist .opr {
    float: right;
    position: relative;
    top: 10px;
    line-height: 32px;
}
.m-sglist .opr a {
    float: left;
    width: 10px;
    height: 11px;
    background: url("../../../assets/imgs/icon2.png") no-repeat -9999px -9999px;
    opacity: 0.9;
}
.m-sglist .opr .play {
    margin-right: 16px;
    background-position: -69px -455px;
}
.m-rctlist li {
    float: left;
    width: 200px;
    height: 50px;
    margin-bottom: 15px;
    line-height: 24px;
}
.m-rctlist .cver, .n-rctlist .cver img {
    float: left;
    width: 50px;
    height: 50px;
}
.u-cover {
    position: relative;
    display: block;
}
.u-cover img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}
.m-rctlist .info {
    margin-left: 60px;
    line-height: 24px;
}
.m-rctlist .by {
    float: left;
}
.m-rctlist .nm {
    float: left;
    max-width: 106px;
    margin: 0 2px 0 4px;
}
.info a:hover{
    text-decoration: underline;
}
</style>